Chegamos à um dos principais pontos do Curso: o Template. É ele que o navegador lê quando o usuário digita o endereço do seu blog, e que chama os outros elementos (postagens, imagens, widgets). Nesta etapa nós veremos 10 dicas muito importantes para alterar o código fonte do seu template e tornar seu blog mais leve, reduzindo o tempo de carregamento.
Então vamos lá, acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template (como na imagem abaixo).
Caso sinta muita dificuldade para fazer a edição do HTML, considere ler alguns textos sobre a linguagem e também sobre CSS, que define os estilos de objetos e textos dentro do seu template.
Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo. Além disso, antes de salvar as alterações à cada passo, visualize seu template para verificar se tudo está funcionando corretamente.
Remova Meta Tags desnecessárias
Mantenha somente as Meta Tags necessárias como a Title (nome do site), Description (descrição do site) e Keywords (palavras-chaves).
Otimize o CSS do Template
Você pode simplificar a parte CSS do código utilizando o Otimizador do site CleanCSS e inserindo na caixa de texto do site tudo que estiver entre as tags <b:skin><![CDATA[/* e ]]></b:skin> do seu Template, então clique em Process CSS. Ele vai gerar a versão compactada do CSS, então é só copiar o texto e substituir o original na edição de HTML do seu Template.
Remova os espaços e linhas em branco
Espaços e linhas em branco no código consomem espaço no arquivo. Removê-los torna o carregamento do blog mais rápido, porém pode dificultar edições posteriores. Então remova ao menos os desnecessários.
Remova as Tags </p>
Enquanto as tags <p> iniciam os parágrafos, as tags </p> os encerram. No entanto, as tags </p> não são essenciais para o funcionamento do parágrafo e podem ser removidas. Use a pesquisa do seu navegador para encontrar as tags </p> e remova-as.
Remova os comentários do código
Comentários são trechos do código que não são levados em conta pelo navegador na hora de renderizar a página e tem apenas a função de auxiliar a edição, mas mesmo assim aumentam o tamanho total do arquivo. Se você já está familiarizado com o template ou não utiliza os comentários, remova-os. Comentários utilizam uma marcação diferente, por exemplo /**** Comentário****/, <!–Comentário–!> e //Comentário. Note que alguns scripts/hacks utilizam os comentários para funcionar, então verifique antes de apagar.
Use a barra (/) no fim das URLs
Endereços com barras no fim abrem mais rapidamente. Por exemplo, http://www.meusite.com.br/ abre mais rápido que http://www.meusite.com.br . O mesmo vale para diretórios, como http://www.meusite.com.br/forum/. Portanto, utilize a barra ao criar links no template. No entanto, você não deve acrescentar a barra à endereços que terminam com extensões de arquivo (.html ou .jpg, por exemplo).
Defina altura e largura para imagens
Quando você utilizar alguma imagem no seu template, não se esqueça de determinar altura (height) e largura (width). Quando esse atributo não é definido, o navegador é obrigado a determinar esses valores antes de continuar com o carregamento do restante do blog. O código de uma imagem com altura e largura definida fica assim:
<img src="endereço URL da imagem" width="largura" height="altura"/>
Para descobrir a altura e largura das imagens, vá em
Propriedades clicando com o botão direito em cima da imagem. O tamanho é determinado em
pixels.
Abrevie o código
O processo realizado no item 2 já faz esse tipo de modificação na parte CSS do código. Esta dica é para quem já tem alguma noção de HTML e assim integrar esses conceitos no restante do código e nas próximas edições que você fizer. As abreviações de código ajudam a diminuir o tamanho do arquivo sem que nada se perca. Por exemplo, as abreviações de cor, que reduzem o código de 6 dígitos para 3: - Laranja: #ff9900 pode ser abreviado para #f90
- Preto: #000000 pode ser abreviado para #000
- Amarelo: #ffff00 pode ser abreviado para #ff0
- Azul Claro: #69C7E8 não pode ser abreviado
É fácil entender a lógica da abreviação, e tendo em mente os valores abreviados é só fazer a substituição. Também é possível abreviar medidas, como no exemplo:
- Margin: 0 0 0 0; pode ser abreviado para Margin: 0;
- Margin: 0px; pode ser abreviado para Margin: 0; pois o zero não depende de qual sistema métrico é escolhido.
- Margin: 0 10px 0 0; pode ser abreviado para Margin: 0 10px; pois o que não é colocado é sempre entendido como 0;
Da mesma forma, é possível abreviar várias linhas de código em uma, como no exemplo:
| Original | Abreviado |
| body {
border: 5px none #000;
font: Verdana;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
} | body{border:5px none #000;font:Verdana;font-size:12px;text-align:center;margin:0;padding:0;} |
Avalie o desempenho dos Scripts/Hacks
Não cometa o erro de colocar scripts/hacks (resumos de postagens, contador de usuários, etc) no seu template e esquecer-se deles. Faça uma avaliação durante uma semana de como eles estão afetando o tempo de carregamento e a usabilidade do seu blog e determine se o benefício proporcionado por ele é superior ao peso a mais na página. Se você já tem vários instalados em sua página, sugiro que faça um backup do código e remova todos. Então verifique a diferença no carregamento da página e determine quais devem voltar ou não.
Remova entradas redundantes
Esta recomendação exige um conhecimento intermediário de HTML. Existem muitas formas de se cometer redundância no código, por exemplo: um estilo de Título (Header) que vá manter a mesma fonte do corpo, não precisa declarar novamente a fonte a ser usada, já que ela vai herdar a fonte do corpo. O mesmo vale para cores, alinhamento e outras configurações. Da mesma forma você deve eliminar elementos desnecessários, como classes CSS não usadas e definições vazias como background:url(), border:none e outras.
Na próxima etapa, vamos aprender a otimizar as imagens do seu blog e alguns truques para tirar o melhor delas. Ir para a Parte 4 >>
O template iceBooster foi testado e otimizado com o curso Blogger Rápido - iceBreaker.
Assine o Feed
Adicione ao Google
Receba por Email
Twitter
